<template>
  <baidu-map class="map" :center="center" :zoom="zoom">
    <!--
    baidu-map的属性
    :scroll-wheel-zoom="true" 混轮缩放
    :mapStyle="mapStyle"    mapType="BMAP_SATELLITE_MAP"地图主题
     -->
    <!-- 地图右击提示信息，再没有覆盖层下右击提示菜单 -->
    <bm-context-menu>
      <bm-context-menu-item :callback="gotoBeijing" text="去北京" iconUrl="http://lbsyun.baidu.com/skins/MySkin/resources/img/red.png"></bm-context-menu-item>
      <bm-context-menu-item :callback="gotoShanghai" text="去上海" iconUrl="http://lbsyun.baidu.com/skins/MySkin/resources/img/red.png"></bm-context-menu-item>
      <bm-context-menu-item :callback="gotoNingbo" text="宁波" iconUrl="http://lbsyun.baidu.com/skins/MySkin/resources/img/red.png"></bm-context-menu-item>
      <bm-context-menu-item seperator></bm-context-menu-item>
      <bm-context-menu-item disabled text="去深圳"></bm-context-menu-item>
    </bm-context-menu>
    <!-- //比例尺 -->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!-- 缩放 -->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!-- 地图类型 map-types添加类型-->
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
    <!-- 缩略图 -->
    <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
    <!-- 定位控件 -->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <!-- 版权控件右上角 -->
    <bm-copyright
      anchor="BMAP_ANCHOR_TOP_RIGHT"
      :copyright="[{ id: 3, content: 'Copyright Message', bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } } }, { id: 2, content: '<a>我是版权信息</a>' }]"
    ></bm-copyright>
    <!-- 城市列表 -->
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <!-- 全景如 -->
    <bm-panorama></bm-panorama>
    <!-- 自定义控件 -->
    <bm-control>
      <button @click="addZoom(19)">缩放至最大</button>
      <button @click="addZoom(10)">还原</button>
      <button @click="addZoom(3)">缩放至最小</button>
      <button @click="topage">跳转</button>
    </bm-control>

    <!-- 添加覆盖物 与文字 -->
    <bm-marker :position="{ lng: 121.55, lat: 29.87 }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
      <bm-label content="我爱宁波" :labelStyle="{ color: '#222', fontSize: '24px' }" :offset="{ width: -35, height: 30 }" />
    </bm-marker>
    <!-- 海量散点图 -->
    <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>

    <!-- 行政区域高亮划分  -->
    <bm-boundary name="海曙区" :strokeWeight="2" strokeColor="blue"></bm-boundary>
    <bm-boundary name="北仑区" :strokeWeight="1" strokeColor="blue"></bm-boundary>
    <bm-boundary name="象山县" :strokeWeight="1" strokeColor="blue"></bm-boundary>
    <bm-boundary name="宁海县" :strokeWeight="1" strokeColor="blue"></bm-boundary>
    <bm-boundary name="奉化区" :strokeWeight="1" strokeColor="blue"></bm-boundary>

    <!-- 不好用 -->
    <!-- 根据搜索定位位置，点击定位坐标提示定位信息 -->
    <bm-view class="map"></bm-view>
    <bm-control :offset="{ width: '10px', height: '10px' }">
      <bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 1 }">
        <!-- sugStyle搜索提示框样式 -->
        <input style="position: fixed;top:0;left:0" placeholder="请输入地名关键字" />
        <!-- 这里指代一个自定义搜索框组件 -->
      </bm-auto-complete>
    </bm-control>
    <!-- 搜索下拉提示信息 -->
    <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>

    <my-overlay :position="{lng: 121.4, lat: 29.7 }" text="点击我" :active="active" @mouseover.native="active = true" @mouseleave.native="active = false"></my-overlay>

    <div>
      <bm-info-window :position="{ lng: 121.55, lat: 29.88}" title="弹框标题" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
        <p v-text="infoWindow.contents"></p>
        <button @click="clear">关闭</button>
      </bm-info-window>
      <!-- <img :src='imgs' /> -->
    </div>
  </baidu-map>
</template>

<script>
  // 自定义覆盖物有两种方法,栗子是经过二次封装的，官网有单独使用的
import MyOverlay from './MyOverlay.vue';
export default {
  name: 'HelloWorld',
  data() {
    return {
      //  imgs:require('../assets/logo.png'),
      keyword: '',
      polyline: {
        editing: false,
        paths: []
      },
      center: { lng: 121.55, lat: 29.88 },
      points: [],
      zoom: 10,
      active: false,
      infoWindow: {
              show: true,
              contents: '弹框信息'
            }
    };
  },
  components: {
    MyOverlay
  },
  created() {
    this.addPoints();
  },
  mounted() {},
  methods: {
    // 控制地图缩放事件
    addZoom(level) {
      this.zoom = level;
    },
    topage() {
      this.$router.push('./mo');
    },
    // 点击单点事件
    clickHandler(e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
    },
    // 添加海量散点
    addPoints() {
      const points = [];
      for (var i = 0; i < 100; i++) {
        const position = { lng: Math.random() * 40 + 80, lat: Math.random() * 30 + 20 };
        points.push(position);
      }
      this.points = points;
    },
    // 右击地图显示功能菜单，菜单事件
    gotoBeijing(e) {
      this.center = {
        lng: 116.404,
        lat: 39.915
      };
    },
    gotoShanghai(e) {
      this.center = {
        lng: 121.473354,
        lat: 31.238413
      };
    },
    gotoNingbo(e) {
      this.center = {
        lng: 121.55,
        lat: 29.88
      };
    },
    // 提示框
    infoWindowClose (e) {
          this.infoWindow.show = false
        },
        infoWindowOpen (e) {
          this.infoWindow.show = true
        },
        clear () {
          this.infoWindow.show = false
        }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.map {
  width: 100%;
  height: 600px;
}
.BMap_CityListCtrl {
  margin-left: 100px;
}
.BMap_cpyCtrl {
  margin-right: 200px;
}
.BMap_stdMpType0 {
  margin-top: 72px;
}
.anchorTL button {
  margin-top: 50px;
}
</style>
